<!-- 
IconFunction.vue
这是一个使用函数式组件方式创建的图标组件
函数式组件的特点：
- 无状态
- 无实例
- 渲染开销更小
- 适用于纯展示性的简单组件
-->
<script lang="ts">
  import { h, defineComponent } from 'vue'

  // 定义图标类型
  type IconType = 'success' | 'warning' | 'error' | 'info'

  // 图标路径映射
  const iconPaths = {
    success: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z',
    warning:
      'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z',
    error:
      'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z',
    info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-11h2v6h-2zm0 8h2v2h-2z',
  }

  // 图标颜色映射
  const iconColors = {
    success: '#4CAF50',
    warning: '#FFC107',
    error: '#F44336',
    info: '#2196F3',
  }

  // 创建函数式组件
  export default defineComponent({
    name: 'IconFunction',

    props: {
      // 图标类型
      type: {
        type: String as () => IconType,
        required: true,
        validator: (value: string) => ['success', 'warning', 'error', 'info'].includes(value),
      },
      // 图标大小
      size: {
        type: [Number, String],
        default: 24,
      },
    },

    // 函数式组件的渲染函数
    setup(props) {
      return () =>
        h(
          'svg',
          {
            xmlns: 'http://www.w3.org/2000/svg',
            width: props.size,
            height: props.size,
            viewBox: '0 0 24 24',
            fill: iconColors[props.type],
            style: {
              display: 'inline-block',
              verticalAlign: 'middle',
            },
          },
          [
            h('path', {
              d: iconPaths[props.type],
            }),
          ],
        )
    },
  })
</script>
